﻿<!-- Copyright (c) Microsoft Corporation. All rights reserved. See License.txt in the project root for license information. -->
<Page
    x:Name="pageRoot"
    x:Class="Weathr.MainPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Weathr"
    xmlns:common="using:Weathr.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- Converter references -->
        <common:BooleanNegationConverter x:Key="BooleanNegationConverter"/>
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <local:BooleanNegationToVisibilityConverter x:Key="BooleanNegationToVisibilityConverter"/>
        <local:DateTimeToStringConverter x:Key="DateTimeToStringConverter"/>
        <local:IntegerToStringTemperatureConverter x:Key="IntToStringTemperatureConverter"/>
        <local:TemperatureToColorConverter x:Key="TemperatureToColorConverter"/>
        <local:FloatToStringPrecipitationConverter x:Key="FloatToStringPrecipitationConverter"/>
        <local:ForecastToButtonColorConverter x:Key="ForecastToButtonColorConverter"/>

        <!-- Data references -->
        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
            x:Name="ForecastViewSource"
            Source="{Binding ForecastManager.ForecastGroups}"
            />
        <!-- Collection of data service providers. Used to give credit to data providers. -->
        <CollectionViewSource
            x:Name="DataProvidersViewSource"
            Source="{Binding DataProviders}"
            />

        <!-- This storyboard lightens the background color. We lighten the background color when we navigate from another page. -->
        <Storyboard x:Name="LightenBackground">
            <ColorAnimation EnableDependentAnimation="True" 
                            Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)"
                            Storyboard.TargetName="RootElement"
                            Duration="0:0:0.5" From="#88000000" To="#00000000"/>
        </Storyboard>

    </Page.Resources>
    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid x:Name="RootElement" Background="Transparent">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <!-- Setting Canvas.ZIndex to 1 here places the back button and page title on top of all other elements. -->
        <Grid Canvas.ZIndex="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>

        <!-- The contents of this Canvas defines info that is presented on the primary and secondary Live Tiles.
        In order to use RenderTargetBitmap, you must render content that's part of the live visual tree. 
        Therefore, these elements are presented offscreen because we don't want the user to see them. -->
        <!-- TODO: Is there any danger in setting this way offscreen, or is it OK? -->

        <!-- This one's for the large tile -->
        <Canvas>
            <Canvas Canvas.Left="11000" x:Name="HugeTile" Visibility="Collapsed">
                <Grid HorizontalAlignment="Left" Width="310" Height="310">
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                        <Image x:Name="ForecastHugeTileImage" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>

                    <Image x:Name="ForecastHugeTileWeatherImage" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}" Margin="40,0,0,0" Width="150" Height="150" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBlock Margin="23,3,0,0" FontSize="108" Text="{Binding Path=ForecastTile.Today.CurrentDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="Black" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                    <TextBlock Margin="20,0,0,0" FontSize="108" Text="{Binding Path=ForecastTile.Today.CurrentDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>

                    <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                        <TextBlock HorizontalAlignment="Right" Text="{Binding ForecastTile.DisplayName}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Margin="0,0,15,10" FontSize="22" FontWeight="SemiBold"/>
                        <TextBlock HorizontalAlignment="Right" Text="{Binding ForecastTile.Today.Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="0,-10,15,0" FontSize="16" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,0,15,5" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}">
                            <TextBlock Text="&#x25BC;" Foreground="LightSkyBlue" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="0,0,0,0" FontSize="16"/>
                            <TextBlock Text="{Binding Path=ForecastTile.Today.ExpectedLoDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="3,0,5,0" FontSize="16"/>
                            <TextBlock Text="&#x25B2;" Foreground="#FFF16262" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="0,0,0,0" FontSize="16">
                            </TextBlock>
                            <TextBlock Text="{Binding Path=ForecastTile.Today.ExpectedHiDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="3,0,0,0" FontSize="16"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Canvas>
        </Canvas>

        <!-- This one's for the wide tile -->
        <Canvas>
            <Canvas Canvas.Left="10000" x:Name="WideTile" Visibility="Collapsed">
                <Grid HorizontalAlignment="Left" Width="310" Height="150">
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                        <Image x:Name="ForecastWideTileImage" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>

                    <Image x:Name="ForecastWideTileWeatherImage" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}" Margin="40,0,0,0" Width="100" Height="100" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBlock Margin="23,3,0,0" FontSize="72" Text="{Binding Path=ForecastTile.Today.CurrentDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="Black" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                    <TextBlock Margin="20,0,0,0" FontSize="72" Text="{Binding Path=ForecastTile.Today.CurrentDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>

                    <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                        <TextBlock HorizontalAlignment="Right" Text="{Binding ForecastTile.DisplayName}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Margin="0,0,15,10" FontWeight="SemiBold"/>
                        <TextBlock HorizontalAlignment="Right" Text="{Binding ForecastTile.Today.Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="0,-10,15,0" FontSize="12" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,0,15,5" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}">
                            <TextBlock Text="&#x25BC;" Foreground="LightSkyBlue" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="0,0,0,0" FontSize="12"/>
                            <TextBlock Text="{Binding Path=ForecastTile.Today.ExpectedLoDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="3,0,5,0" FontSize="12"/>
                            <TextBlock Text="&#x25B2;" Foreground="#FFF16262" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="0,0,0,0" FontSize="12">
                            </TextBlock>
                            <TextBlock Text="{Binding Path=ForecastTile.Today.ExpectedHiDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="3,0,0,0" FontSize="12"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Canvas>
        </Canvas>

        <!-- This one's for the square tile -->
        <Canvas>
            <Canvas Canvas.Left="9000" x:Name="SquareTile" Visibility="Collapsed">
                <Grid HorizontalAlignment="Left" Width="150" Height="150">
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                        <Image x:Name="ForecastSquareTileImage" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>

                    <Image x:Name="ForecastSquareTileWeatherImage" Margin="40,0,0,0" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                    <TextBlock Margin="23,3,0,0" FontSize="72" Text="{Binding Path=ForecastTile.Today.CurrentDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="Black" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                    <TextBlock Margin="20,0,0,0" FontSize="72" Text="{Binding Path=ForecastTile.Today.CurrentDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                    <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                        <TextBlock HorizontalAlignment="Right" Text="{Binding ForecastTile.DisplayName}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Margin="0,0,10,10" FontWeight="SemiBold" FontSize="12"/>
                        <TextBlock HorizontalAlignment="Right" Text="{Binding ForecastTile.Today.Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="0,-10,10,5" FontSize="11" Visibility="{Binding ElementName=pageRoot, Path=DefaultViewModel.IsSecondaryTileUpdate, Converter={StaticResource BooleanNegationToVisibilityConverter}}"/>
                    </StackPanel>
                </Grid>
            </Canvas>
        </Canvas>

        <!-- The contents of this Canvas define the collection of locations that appear on the sphere. -->
        <Canvas Grid.RowSpan="2">
            <ItemsControl ItemsSource="{Binding Source={StaticResource ForecastViewSource}}" IsEnabled="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationConverter}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl>
                            <!-- This is the Canvas for the forecast group. -->
                            <Canvas Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">

                                <ItemsControl ItemsSource="{Binding Items}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <ContentControl>
                                                <Canvas>
                                                    <Canvas Margin="-18,-9,0,0" Canvas.Left="{Binding ScreenLocationLeft}" Canvas.Top="{Binding ScreenLocationTop}">
                                                        <Canvas Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}">
                                                            <Button Background="Transparent" BorderThickness="0" IsHitTestVisible="False">
                                                                <StackPanel Orientation="Horizontal">
                                                                    <Ellipse Width="8" Height="8" Fill="Black" Margin="1,1,5,0"/>
                                                                    <TextBlock Text="{Binding DisplayName}" Foreground="Black" Margin="1,1,0,0"/>
                                                                </StackPanel>
                                                            </Button>
                                                            <Button Background="#11000011" BorderThickness="0" Click="LocationButton_Click">
                                                                <StackPanel Orientation="Horizontal">
                                                                    <Ellipse x:Name="LocationPoint" Width="8" Height="8" Fill="LightGray" Margin="0,0,5,0"/>
                                                                    <TextBlock x:Name="LocationName" Text="{Binding DisplayName}" Foreground="White"/>
                                                                </StackPanel>
                                                            </Button>
                                                        </Canvas>

                                                        <Canvas Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}">
                                                            <Canvas Visibility="{Binding UpdateFailed, Converter={StaticResource BooleanToVisibilityConverter}}">
                                                                <TextBlock Text="&#xE171;" Margin="-12,-12,0,0" Foreground="Red" FontSize="24" FontFamily="Segoe UI Symbol">
                                                                    <ToolTipService.ToolTip>
                                                                        <ToolTip Content="Update failed. Please try again in a bit."/>
                                                                    </ToolTipService.ToolTip>
                                                                </TextBlock>
                                                            </Canvas>
                                                        </Canvas>

                                                        <Canvas Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}">
                                                            <Canvas Visibility="{Binding UpdateFailed, Converter={StaticResource BooleanNegationToVisibilityConverter}}">
                                                                <Canvas x:Name="WeatherInfo" Loaded="WeatherInfo_Loaded" Visibility="Collapsed">

                                                                    <Canvas.Resources>
                                                                        <!-- This animation rotates the compass needle when the weather changes. -->
                                                                        <Storyboard x:Name="CompassNeedleAnimation">
                                                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CompassNeedleImage"
                                                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
                                                                                <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
                                                                                <EasingDoubleKeyFrame Value="{Binding Path=Current.WindDirectionDegree}" KeyTime="0:0:1">
                                                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                                                        <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                                                </EasingDoubleKeyFrame>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                        </Storyboard>

                                                                        <!-- This animates the bounce effect for weather info when the user taps it to be shown. -->
                                                                        <Storyboard x:Name="ShowWeatherInfoStoryboard">
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="WeatherInfo" Storyboard.TargetProperty="Visibility">
                                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Canvas.Top)"
                                                    Storyboard.TargetName="CurrentTempShadow"
                                                    Duration="0:0:1" From="0" To="-75">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Canvas.Top)"
                                                    Storyboard.TargetName="CurrentTemp"
                                                    Duration="0:0:1" From="0" To="-75">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Canvas.Top)"
                                                    Storyboard.TargetName="WeatherImage"
                                                    Duration="0:0:1" From="0" To="-100">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Canvas.Left)"
                                                    Storyboard.TargetName="WeatherImage"
                                                    Duration="0:0:1" From="0" To="-50">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Canvas.Top)"
                                                    Storyboard.TargetName="CompassImage"
                                                    Duration="0:0:1" From="0" To="-15">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation
                                                                                EnableDependentAnimation="True" 
                                                                                Storyboard.TargetProperty="(Canvas.Left)"
                                                                                Storyboard.TargetName="CompassImage"
                                                                                Duration="0:0:1" From="0" To="-55">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CompassNeedleImage"
                                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
                                                                                <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
                                                                                <EasingDoubleKeyFrame Value="{Binding Path=Current.WindDirectionDegree}" KeyTime="0:0:1.75">
                                                                                    <EasingDoubleKeyFrame.EasingFunction>
                                                                                        <ElasticEase Oscillations="2" Springiness="1" EasingMode="EaseOut"/>
                                                                                    </EasingDoubleKeyFrame.EasingFunction>
                                                                                </EasingDoubleKeyFrame>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Canvas.Left)"
                                                    Storyboard.TargetName="RainImage"
                                                    Duration="0:0:1" From="0" To="-45">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Canvas.Top)"
                                                    Storyboard.TargetName="RainImage"
                                                    Duration="0:0:1" From="0" To="-50">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                                                             Storyboard.TargetProperty="(Canvas.Left)"
                                                                                             Storyboard.TargetName="TempMinMaxStackPanel"
                                                                                             Duration="0:0:1" From="0" To="45">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                                                            Storyboard.TargetProperty="(Canvas.Top)"
                                                                                            Storyboard.TargetName="TempMinMaxStackPanel"
                                                                                            Duration="0:0:1" From="0" To="-88">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>

                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                                                             Storyboard.TargetProperty="(Canvas.Left)"
                                                                                             Storyboard.TargetName="TempMinMaxStackPanelShadow"
                                                                                             Duration="0:0:1" From="0" To="45">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>
                                                                            <DoubleAnimation EnableDependentAnimation="True" 
                                                                                            Storyboard.TargetProperty="(Canvas.Top)"
                                                                                            Storyboard.TargetName="TempMinMaxStackPanelShadow"
                                                                                            Duration="0:0:1" From="0" To="-88">
                                                                                <DoubleAnimation.EasingFunction>
                                                                                    <ElasticEase Oscillations="1" Springiness="1" EasingMode="EaseOut"/>
                                                                                </DoubleAnimation.EasingFunction>
                                                                            </DoubleAnimation>

                                                                            <ColorAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="LocationName"
                                                    Duration="0:0:0.25" From="White" To="YellowGreen">
                                                                            </ColorAnimation>
                                                                            <ColorAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="LocationPoint"
                                                    Duration="0:0:0.25" From="White" To="YellowGreen">
                                                                            </ColorAnimation>
                                                                        </Storyboard>

                                                                        <!-- This animates the fade effect for weather info when the user hides it. -->
                                                                        <Storyboard x:Name="HideWeatherInfoStoryboard">
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="WeatherInfo" Storyboard.TargetProperty="Visibility">
                                                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.45" Value="Collapsed"/>
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="CurrentTempShadow">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="CurrentTemp">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="WeatherImage">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="CompassImage">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="CompassNeedleImage">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="RainImage">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="TempMinMaxStackPanel">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="TempMinMaxStackPanelShadow">
                                                                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.45"/>
                                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                            <ColorAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="LocationName"
                                                    Duration="0:0:0.25" From="YellowGreen" To="White">
                                                                            </ColorAnimation>
                                                                            <ColorAnimation EnableDependentAnimation="True" 
                                                    Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="LocationPoint"
                                                    Duration="0:0:0.25" From="YellowGreen" To="White">
                                                                            </ColorAnimation>
                                                                        </Storyboard>

                                                                    </Canvas.Resources>

                                                                    <!-- The following elements define the weather info elements. -->

                                                                    <!-- Weather conditions image. -->
                                                                    <Image x:Name="WeatherImage" Width="100" Height="100" Source="{Binding Current.WeatherImagePathUri}" Visibility="{Binding IsPending, Converter={StaticResource BooleanNegationToVisibilityConverter}}">
                                                                        <ToolTipService.ToolTip>
                                                                            <ToolTip Content="{Binding Path=Current.Description}"/>
                                                                        </ToolTipService.ToolTip>
                                                                    </Image>

                                                                    <!-- Current temperature. Shown only if the top app bar is set to today. -->
                                                                    <Canvas>
                                                                        <Canvas Visibility="{Binding IsPending, Converter={StaticResource BooleanNegationToVisibilityConverter}}">
                                                                            <!-- Offset text for shadow effect. -->
                                                                            <TextBlock x:Name="CurrentTempShadow" IsHitTestVisible="False"
                                                                                Visibility="{Binding Current.IsToday, Converter={StaticResource BooleanToVisibilityConverter}}"
                                                                                Canvas.Left="0" Foreground="Black" FontSize="72"
                                                                                Text="{Binding ElementName=CurrentTemp, Path=Text}">
                                                                                <TextBlock.RenderTransform>
                                                                                    <TranslateTransform X="3" Y="3" />
                                                                                </TextBlock.RenderTransform>
                                                                            </TextBlock>

                                                                            <!-- Main text. -->
                                                                            <TextBlock x:Name="CurrentTemp" 
                                                                                       IsHitTestVisible="False"
                                                                                       Visibility="{Binding Current.IsToday, Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="LightGray" FontSize="72"
                                                                                       Text="{Binding Path=Current.CurrentDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}">
                                                                                            <!-- Tooltip that describes the weather in greater detail -->
                                                                                            <ToolTipService.ToolTip>
                                                                                                <ToolTip Content="{Binding Current.Description}"/>
                                                                                            </ToolTipService.ToolTip>
                                                                            </TextBlock>
                                                                        </Canvas>
                                                                        <!-- Shown as the info is loading -->
                                                                        <Canvas Visibility="{Binding IsPending, Converter={StaticResource BooleanToVisibilityConverter}}">
                                                                            <ProgressRing Canvas.Top="-5" Canvas.Left="-5" IsActive="True"></ProgressRing>
                                                                        </Canvas>
                                                                    </Canvas>

                                                                    <Canvas Visibility="{Binding HasCurrent, Converter={StaticResource BooleanToVisibilityConverter}}">
                                                                        <!-- Offset text for shadow effect. -->
                                                                        <Canvas  x:Name="TempMinMaxStackPanelShadow">
                                                                            <StackPanel Orientation="Horizontal">
                                                                                <TextBlock Text="&#x25BC;" FontSize="16" FontWeight="SemiBold" Foreground="Black" Margin="1,1,1,0"/>
                                                                                <TextBlock Text="{Binding Path=Current.ExpectedLoDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="Black" FontSize="16" FontWeight="SemiBold" Margin="0,0,5,0"/>
                                                                                <TextBlock Text="&#x25B2;" FontSize="16" FontWeight="SemiBold" Foreground="Black" Margin="0,0,1,0"/>
                                                                                <TextBlock Text="{Binding Path=Current.ExpectedHiDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="Black" FontSize="16" FontWeight="SemiBold"/>
                                                                            </StackPanel>
                                                                        </Canvas>
                                                                        <!-- Main text of expected high and low temperatures. -->
                                                                        <Canvas x:Name="TempMinMaxStackPanel">
                                                                            <StackPanel Orientation="Horizontal">
                                                                                <TextBlock Text="&#x25BC;" FontSize="16" Foreground="LightSkyBlue" Margin="0,0,1,0"/>
                                                                                <TextBlock Text="{Binding Path=Current.ExpectedLoDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="{Binding Current.ExpectedLoDisplayTemperature, Converter={StaticResource TemperatureToColorConverter}}" FontSize="16" Margin="0,0,5,0"/>
                                                                                <TextBlock Text="&#x25B2;" FontSize="16" Foreground="#FFF16262" Margin="0,0,1,0"/>
                                                                                <TextBlock Text="{Binding Path=Current.ExpectedHiDisplayTemperature, Converter={StaticResource IntToStringTemperatureConverter}}" Foreground="{Binding Current.ExpectedHiDisplayTemperature, Converter={StaticResource TemperatureToColorConverter}}" FontSize="16"/>
                                                                            </StackPanel>
                                                                        </Canvas>
                                                                        <!-- Add both compass and needle to Canvas so that their positions stay in sync during animations. -->
                                                                        <Canvas x:Name="CompassImage" Width="34" Height="34" >
                                                                            <Image Width="34" Height="34" Source="Assets/Compass.png">
                                                                                <ToolTipService.ToolTip>
                                                                                    <ToolTip Content="{Binding Current.DisplayWindSpeed}"/>
                                                                                </ToolTipService.ToolTip>
                                                                            </Image>
                                                                            <Image x:Name="CompassNeedleImage" Canvas.Left="15" Canvas.Top="5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="4" Height="24" Source="Assets/compassneedle.png">
                                                                                <UIElement.RenderTransform>
                                                                                    <RotateTransform CenterX="2" CenterY="12" Angle="0"></RotateTransform>
                                                                                </UIElement.RenderTransform>
                                                                                <ToolTipService.ToolTip>
                                                                                    <ToolTip Content="{Binding Current.DisplayWindSpeed}"/>
                                                                                </ToolTipService.ToolTip>
                                                                            </Image>
                                                                        </Canvas>

                                                                        <!-- Shown when rain is expected. -->
                                                                        <Canvas>
                                                                            <Image Margin="-10,-5,0,0" x:Name="RainImage" Visibility="{Binding Path=Current.IsPrecipitationExpected, Converter={StaticResource BooleanToVisibilityConverter}}" Width="8" Height="34" Source="Assets/RainGague.png">
                                                                                <!-- Tooltip shows exact amount expected. -->
                                                                                <ToolTipService.ToolTip>
                                                                                    <ToolTip Content="{Binding Current.PrecipMM, Converter={StaticResource FloatToStringPrecipitationConverter}}"/>
                                                                                </ToolTipService.ToolTip>
                                                                            </Image>
                                                                        </Canvas>
                                                                    </Canvas>
                                                                </Canvas>
                                                            </Canvas>
                                                        </Canvas>
                                                    </Canvas>
                                                </Canvas>
                                            </ContentControl>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>

                                <!-- The group indicator is shown when there is more than one item. -->
                                <Canvas Canvas.Left="{Binding ScreenLocationLeft}" Canvas.Top="{Binding ScreenLocationTop}"
                                        Visibility="{Binding HasMultipleItems, Converter={StaticResource BooleanToVisibilityConverter}}">
                                    <AppBarButton Icon="Next" Height="95" Margin="-80,20,0,0" Click="GroupNextButton_Click" Tag="{Binding}"/>
                                </Canvas>

                            </Canvas>
                        </ContentControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Canvas>

        <!-- Displays the last time weather info was retrieved. -->
        <TextBlock Grid.RowSpan="2" Text="{Binding ForecastManager.LastRefreshTime}" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>

        <!-- Gives credit to the services and other data sources used. -->
        <ItemsControl Grid.RowSpan="2" VerticalAlignment="Bottom" HorizontalAlignment="Right" ItemsSource="{Binding Source={StaticResource DataProvidersViewSource}}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" HorizontalAlignment="Right" TextWrapping="NoWrap"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <!-- This popup lists all locations for the user to choose from in order to change the Home location. -->
        <Canvas>
            <Popup x:Name="ChangeHomePopup" IsLightDismissEnabled="True" IsOpen="False" MaxHeight="500">
                <Border BorderBrush="#00b2f0" BorderThickness="2">
                    <ScrollViewer Background="White" MinWidth="400" MaxHeight="500" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Hidden">
                        <ItemsControl SizeChanged="ChangeHome_SizeChanged" ItemsSource="{Binding AllForecastsSortedAlphabetically}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Button RequestedTheme="Light" Background="{Binding Converter={StaticResource ForecastToButtonColorConverter}}" Click="ChangeHomeItem_Click" Content="{Binding DisplayName}" Margin="10" Foreground="Black"  FontFamily="Segoe UI" FontSize="24.6667"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </ScrollViewer>
                </Border>
            </Popup>
        </Canvas>

        <!-- This popup lists all visible locations for the user to choose from in order to set the secondary live tile. -->
        <Canvas>
            <Popup x:Name="PinToStartPopup" IsLightDismissEnabled="True" IsOpen="False" MaxHeight="500">
                <Border BorderBrush="#00b2f0" BorderThickness="2">
                    <ScrollViewer Background="White" MinWidth="400" MaxHeight="500" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Hidden">
                        <ItemsControl SizeChanged="PinToStartSizeChanged" ItemsSource="{Binding VisibleForecastsSortedAlphabetically}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Button RequestedTheme="Light" Background="{x:Null}" Click="PinToStartItem_Click" Content="{Binding DisplayName}" Margin="10" Foreground="Black" FontFamily="Segoe UI" FontSize="24.6667"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </ScrollViewer>
                </Border>
            </Popup>
        </Canvas>

        <!-- This Canvas defines the pin control that's used to select locations on the globe. -->
        <Canvas DataContext="{Binding Pin}">
            <StackPanel Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Orientation="Vertical" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
                <!-- The name of the city the pin is currently hovering over. -->
                <TextBlock IsHitTestVisible="False" Visibility="{Binding IsValid, Converter={StaticResource BooleanToVisibilityConverter}}" Text="{Binding DisplayName}" FontSize="14" Foreground="Gold" Opacity="0.75" HorizontalAlignment="Center"></TextBlock>
                <!-- Button for the pin itself. -->
                <Button
                    SizeChanged="OnPinSizeChanged"
                    Content="&#xE139;"
                    BorderThickness="0"
                    Opacity="0.75"
                    FontFamily="Segoe UI Symbol"
                    FontSize="36"/>
            </StackPanel>
        </Canvas>

        <!-- Shown when any async operation is pending. For example, when we'er still waiting for the cities file to load
             and the user selects the Random or Drop Pin commands. -->
        <ProgressRing Grid.RowSpan="2" Width="50" Height="50" IsActive="{Binding IsAsyncOperationActive}"/>
    </Grid>

    <!-- The top app bar allows the user to choose which date to show weather info for. -->
    <Page.TopAppBar>
        <AppBar x:Uid="AppBar"
                AutomationProperties.AutomationId="MainPageTopAppBar"
                Padding="10,0,10,0"
                Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                Opened="TopAppBar_Opened"
                Closed="TopAppBar_Closed"
                >
            <Grid>
                <GridView x:Name="DateStripGridView"
                          Grid.Column="0"
                          AutomationProperties.AutomationId="DateStripGridView"
                          IsItemClickEnabled="True"
                          ItemsSource="{Binding ForecastManager.Calendar}"
                          SelectionMode="Single"
                          VerticalAlignment="Center"
                          IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                          ItemClick="DateStripGridView_ItemClick"
                          >
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Height="138" Orientation="Horizontal" HorizontalAlignment="Center" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Border Background="#333333" Height="138">
                                <TextBlock Text="{Binding Converter={StaticResource DateTimeToStringConverter}}" VerticalAlignment="Center" TextAlignment="Center" FontSize="18" FontWeight="Bold" Width="200"/>
                            </Border>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <!-- The bottom app bar contains additional commands. -->
    <!-- Commands are disabled when another command is active. -->
    <Page.BottomAppBar>
        <CommandBar x:Name="BottomCommandBar"
            x:Uid="CommandBar"
            Padding="10,0,10,0">

            <AppBarButton
                        x:Name="ChangeHomeAppBarButton"
                        Icon="Map"
                        Label="Change Home"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="ChangeHome_Click"/>

            <AppBarButton 
                        Icon="Home"
                        Label="Home"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="Home_Click"/>

            <AppBarButton 
                        Icon="Globe"
                        Label="Current Location"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="Current_Click"/>

            <AppBarButton 
                        Icon="Shuffle"
                        Label="Random"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="Random_Click"/>

            <AppBarButton
                        x:Name="PinToStartAppBarButton"
                        Icon="Pin"
                        Label="Pin to Start"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="PinToStart_Click"/>

            <AppBarButton
                        Icon="MapPin"
                        Label="Drop Pin"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="DropPin_Click"/>

            <AppBarButton 
                        Icon="Manage"
                        Label="Manage Locations"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="Locations_Click"/>

            <AppBarButton 
                        Icon="Refresh"
                        Label="Refresh"
                        IsEnabled="{Binding IsAsyncOperationActive, Converter={StaticResource BooleanNegationConverter}}"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                        Click="Refresh_Click"/>

            <!-- Command bar commands for when the pin control is active. -->
            <AppBarButton 
                        Icon="Save"
                        Label="Save"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
                        IsEnabled="{Binding Pin.IsValid}"
                        Click="SavePinAppBarButton_Click"/>

            <AppBarButton 
                        Icon="Cancel"
                        Label="Cancel"
                        Visibility="{Binding Pin.IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
                        Click="CancelPinAppBarButton_Click"/>

        </CommandBar>

    </Page.BottomAppBar>

</Page>